<template>
  <div>
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <el-tree ref="tree" :data="filtedData" v-bind="opt" @check-change="checkChange"></el-tree>
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign } from "../../utils/common";
  import StrAllMixin from "../validMixins/StrAllMixin";
  import NumberAllMixin from "../validMixins/NumberAllMixin";
  import EventTrigger from "../plugsMixins/EventTrigger";

  const R = (f, s, c) => s.map(i => (
    f(i), i[c] && i[c].length ? R(f, i[c]):0, i
  ));

  export default {
    name: "PopoTree",
    props: {
      value: { type: [Array, String] },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [],
    data() {
      return {
        mvalue: this.value,
        opt: {},
        disabledAll: false,
        data: [],
      };
    },
    watch: {
      mvalue(val) {
        this.$emit("input", val);
      },
    },
    computed: {
      // 包装原 data，根据全局 disabled 开关，自动设置和清理子节点 disabled 状态
      // 使用 _disabled 存储原 disabled 值，在全局 disabled 关闭时恢复状态
      filtedData() {
        if (this.disabledAll) {
          // 包装，启用 _disabled 存储 disabled
          return R(i => {
            if (i._disabled===undefined) {
              i._disabled = i.disabled===undefined ? false:i.disabled
            }
            i.disabled = true
            }, this.data, this.opt.childrenFieldName)
        } else {
          // 恢复 disabled，清理 _disabled
          R(i => {
            if (i._disabled!=undefined) {
              i.disabled = i._disabled
              delete i._disabled
            }
          }, this.data, this.opt.childrenFieldName)
          return this.data
        }
      },
    },
    created() {
      console.log( "tree data");
      if (this.item.noCoverString && typeof this.mvalue == "string") {
        this.mvalue = (this.mvalue || "").split(",");
      }
      if (!Array.isArray(this.mvalue)) {
        this.mvalue = [this.mvalue];
      }

      this.data = this.item.data || [];

      var opt = objectAssign(
        {
          // data: this.item.data === undefined ? [] : this.item.data,
          nodeKey: this.item.nodeKey === undefined ? "id" : this.item.nodeKey,
          emptyText: this.item.emptyText === undefined ? "无" : this.item.emptyText,
          childrenFieldName: this.item.childrenFieldName === undefined ? "children" : this.item.childrenFieldName,
          labelFieldName: this.item.labelFieldName === undefined ? "label" : this.item.labelFieldName,
          checkOnClickNode: this.item.checkOnClickNode === undefined ? true : this.item.checkOnClickNode,
          defaultExpandAll: this.item.defaultExpandAll === undefined ? true : this.item.defaultExpandAll,
          expandOnClickNode: this.item.expandOnClickNode === undefined ? false : this.item.expandOnClickNode,
          showCheckbox: this.item.showCheckbox === undefined ? true : this.item.showCheckbox,
          defaultCheckedKeys: this.mvalue,
        },
        this.item.props
      );
      // opt.data = this.processData(opt, opt.data);
      // console.log( "opt.data", opt.data);

      opt.props = objectAssign( {},{
        label: opt.labelFieldName,
        children: opt.childrenFieldName
      }, (opt.props || {}) );
      opt.filterNodeMethod = this.filterTree;
      this.opt = opt;
    },
    methods: {
      filterTree(){},
      checkChange(){
        let ids = this.$refs.tree.getCheckedKeys();
        let idsHalf = this.$refs.tree.getHalfCheckedKeys();
        ids = idsHalf.concat(ids);
        // ids = ids.join(",");
        this.mvalue = ids;
      },
    },
  };
</script>

<style scoped lang="scss">
::v-deep {
  .el-tree {
    display: flex;
    flex-wrap: wrap;

    .el-tree-node__children[role="group"] > *:last-child {
      margin-bottom: 20px;
    }

    .el-tree-node {
      // margin-right: 20px;
      // margin-bottom: 10px;
    }
  }
}
</style>
